<template>
  <a-modal
    :visible="visible"
    :confirm-loading="confirmLoading"
    :title="
      item && item.id * 1 > 0
        ? '修改 `' + item.area_type_name + '` 子集'
        : '添加 `' + item.area_type_name + '` 子集'
    "
    :ok-text="'确认保存'"
    :mask-closable="false"
    @cancel="onClose"
    @ok="handleSubmit"
  >
    <a-form-model
      ref="formInline"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :model="formInline"
      @submit="handleSubmit"
    >
      <a-button v-show="false" html-type="submit" />

      <a-form-model-item v-if="formInline.parent_area_name" label="父级">
        {{ formInline.parent_area_name }}
      </a-form-model-item>

      <a-form-model-item label="名称" prop="area_name" required>
        <a-input
          v-model="formInline.area_name"
          :max-length="32"
          placeholder="请输入名称"
        />
      </a-form-model-item>

      <a-form-model-item label="英文名称" prop="area_en">
        <a-input
          v-model="formInline.area_en"
          :max-length="32"
          placeholder="请输入英文名称"
        />
      </a-form-model-item>

      <a-form-model-item label="简称" prop="area_abbreviation">
        <a-input
          v-model="formInline.area_abbreviation"
          :max-length="64"
          placeholder="请输入简称"
        />
      </a-form-model-item>

      <a-form-model-item label="描述" prop="area_desc">
        <a-input
          v-model="formInline.area_desc"
          :max-length="64"
          placeholder="请输入描述"
        />
      </a-form-model-item>

      <a-form-model-item
        v-show="formInline.data_type == 1"
        :label="item.data_value_type == 1 ? '值 (数字)' : '值 (字符串)'"
        prop="data_value"
      >
        <a-input
          v-model="formInline.data_value"
          :max-length="32"
          placeholder="请输入值"
        />
      </a-form-model-item>

      <a-form-model-item :wrapper-col="buttonCol">
        <a-switch
          v-model="formInline.status_flag"
          checked-children="状态: 正常"
          un-checked-children="状态: 停止"
          @change="
            (val) => {
              formInline.status = val ? 1 : 0
            }
          "
        />
      </a-form-model-item>

      <a-divider />

      <a-form-model-item label="显示风格" prop="style_display">
        <a-space>
          <a-tooltip>
            <template slot="title">
              点击修改图标
            </template>
            <a @click="iconVisible = true">
              <app-icon
                v-if="formInline.ico_str"
                style="font-size: 1.3rem;"
                :value="formInline.ico_str"
              />
              <span v-else>无图标</span>
            </a>
          </a-tooltip>
          <app-icon-select
            v-model="iconVisible"
            @change="(val) => $set(formInline, 'ico_str', val)"
          />
          <a-select
            v-model="formInline.style_display"
            allow-clear
            placeholder="显示风格"
            style="width: 150px;"
          >
            <a-select-option value="text">
              文本
            </a-select-option>
            <a-select-option value="tag_first">
              <a-tag>首</a-tag>首字符标签
            </a-select-option>
            <a-select-option value="tag">
              <a-tag>名称标签</a-tag>
            </a-select-option>
            <a-select-option value="weight">
              <a-tag>权重</a-tag> 名称
            </a-select-option>
          </a-select>

          <a-select
            v-model="formInline.style_color"
            allow-clear
            placeholder="风格颜色"
            style="width: 100px;"
          >
            <a-select-option
              v-for="value in colorArray"
              :key="value"
              :value="value"
            >
              <a-tag :color="value">
                {{ value }}
              </a-tag>
            </a-select-option>
          </a-select>
        </a-space>
      </a-form-model-item>

      <a-form-model-item label="预览">
        <app-show :data="formInline" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import systemArea from "@/api/systemArea"
export default {
  model: {
    //event:什么时候触发v-model行为
    event: "change-visible",
    // 定义传递给v-model的那个变量，绑定到哪个属性值上
    prop: "visible",
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => {
        return {
          id: 0,
          area_type_name: "",
          weight: 0,
          status: 1,
          data_type: undefined,
          style_display: "text",
        }
      },
    },
  },
  data() {
    return {
      buttonCol: { span: 18, offset: 4 },
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      confirmLoading: false,

      formInline: {
        ...this.item,
      },
      iconVisible: false,

      colorArray: [
        "pink",
        "red",
        "orange",
        "green",
        "cyan",
        "blue",
        "purple",
        "#f50",
        "#2db7f5",
        "#87d068",
        "#108ee9",
      ],
    }
  },
  watch: {
    visible: function (showFlag) {
      if (!showFlag) return
      this.formInline = {
        status_flag: this.item.status == 1,
      }
      for (let ii in this.item) {
        this.$set(this.formInline, ii, this.item[ii])
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    onClose() {
      this.$emit("change-visible", false)
    },
    onChange() {
      this.onClose()
      this.$emit("change")
    },
    handleSubmit(e) {
      e.preventDefault()

      let flag = undefined
      this.$refs.formInline.validate((valid) => (flag = valid))
      if (!flag) {
        return
      }

      if (this.$func.isNumber(this.item.id) && this.item.id * 1 > 0) {
        systemArea.update(this.item.id, this.formInline).then((response) => {
          if (response.code !== 1) {
            this.$message.error(response.message)
            return
          }
          this.$message.success(response.message)
          this.onChange()
          return
        })
        return
      }
      systemArea.create(this.formInline).then((response) => {
        if (response.code !== 1) {
          this.$message.error(response.message)
          return
        }
        this.$message.success(response.message)
        this.onChange()
        return
      })
    },
  },
}
</script>

<style lang="less" type="text/less" scoped>
.ant-form-item {
  margin-bottom: 6px;
}
</style>
